<template>
  <div style="padding: 10px 0px; background-color: white; height: 100vh">
    <van-form @submit="submitForm">
      <van-field
        v-model="form.customerName"
        label="客户名称"
        placeholder="请输入客户名称"
        clearable
        :rules="[{ required: true, message: '请输入客户名称' }]"
      />
      <searchable-picker
        v-model="form.customerAscription"
        :columns="getGroupData()"
        valueKey="value"
        labelKey="label"
        label="商机归属"
        placeholder="请选择商机归属"
        :rules="[{ required: true, message: '请选择商机归属' }]"
      />
      <van-field
        v-model="form.linkman"
        label="联系人"
        placeholder="请输入联系人"
        :rules="[{ required: true, message: '请输入联系人' }]"
      />
      <van-field
        v-model="form.duty"
        label="职务"
        placeholder="请输入职务"
        :rules="[{ required: true, message: '请输入职务' }]"
      />
      <van-field
        v-model="form.phone"
        label="联系电话"
        placeholder="请输入联系电话"
        :rules="[{ required: true, message: '请输入联系电话' }]"
      />
      <van-field
        readonly
        clickable
        name="area"
        :value="form.region"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
        :rules="[{ required: true, message: '请选择地区' }]"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
        />
      </van-popup>
      <searchable-picker
        v-model="form.customerIndustry"
        :columns="dict.type.customer_industry"
        valueKey="value"
        labelKey="label"
        label="客户行业"
        placeholder="请选择客户行业"
        :rules="[{ required: true, message: '请选择客户行业' }]"
      />
      <searchable-picker
        v-model="form.customerRank"
        :columns="dict.type.customer_rank"
        valueKey="value"
        labelKey="label"
        label="客户级别"
        placeholder="请选择客户级别"
        :rules="[{ required: true, message: '请选择客户级别' }]"
      />
      <searchable-picker
        v-model="form.customerType"
        :columns="dict.type.crm_customer_type"
        valueKey="value"
        labelKey="label"
        label="客户类型"
        placeholder="请选择客户类型"
        :rules="[{ required: true, message: '请选择客户类型' }]"
      />
      <searchable-picker
        v-model="form.customerLabel"
        :columns="dict.type.crm_customer_label"
        valueKey="value"
        labelKey="label"
        label="客户标签"
        placeholder="请选择客户标签"
        :multiSelect="true"
      />
      <searchable-picker
        v-model="form.customerStatus"
        :columns="dict.type.customer_status"
        valueKey="value"
        labelKey="label"
        label="客户状态"
        placeholder="请选择客户状态"
        :rules="[{ required: true, message: '请选择客户状态' }]"
      />
      <searchable-picker
        v-model="form.helpPerson"
        :columns="options"
        valueKey="userId"
        labelKey="userName"
        label="协同人"
        placeholder="请选择协同人"
        :multiSelect="true"
      />
      <van-field
        style="margin-bottom: 50px"
        v-model="form.remark"
        rows="3"
        autosize
        label="备注"
        type="textarea"
        placeholder="请输入备注"
      />
      <div class="mobile-footer">
        <van-button
          round
          native-type="submit"
          style="width: 43%"
          @click="status = '0'"
          v-if="$route.params.customerId === '-1'"
          >存草稿</van-button
        >
        <van-button
          round
          type="info"
          native-type="submit"
          :style="{ width: $route.params.customerId === '-1' ? '43%' : '90%' }"
          @click="status = '1'"
          >{{ title }}</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import {
  getCustomer,
  addCustomer,
  updateCustomer,
  getCustomerOne,
} from "@/api/crm/customer";
import { areaList } from "@vant/area-data";

import { getUserListByStatus } from "@/api/system/user";
export default {
  name: "WeeklyAdd",
  dicts: [
    "customer_industry",
    "crm_customer_type",
    "customer_rank",
    "customer_status",
    "crm_customer_label",
  ],
  data() {
    return {
      // 表单参数
      form: {},
      title: "新增",
      showArea: false,
      areaList: {},
      options: [],
      status: "0",
      customerId: "",
    };
  },
  created() {
    this.customerId = this.$route.params.customerId;
    this.areaList = areaList;
    this.getCustomerOne();
    this.getUserListByStatus();
    this.handleUpdate();
  },
  methods: {
    getCustomerOne() {
      getCustomerOne({ status: "0" }).then((res) => {
        if (res.data) {
          this.form = res.data;
          this.form.region = this.form.region
            ? this.form.region.split(",")
            : null;
          this.form.helpPerson = this.form.helpPerson
            ? this.form.helpPerson.split(",")
            : null;
          this.form.customerLabel = this.form.customerLabel
            ? this.form.customerLabel.split(",")
            : null;
          this.customerId = this.form.customerId
        }
      });
    },
    getUserListByStatus() {
      getUserListByStatus({ status: "0" }).then((res) => {
        this.options = res.data;
      });
    },
    onConfirm(values) {
      this.form.region = "";
      this.form.region = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join(",");
      this.showArea = false;
    },
    handleUpdate() {
      if (this.customerId !== "-1") {
        getCustomer(this.customerId).then((response) => {
          this.form = response.data;
          this.form.helpPerson = response.data?.helpPerson
            ? response.data?.helpPerson.split(",")
            : null;
          this.form.customerLabel = response.data?.customerLabel
            ? response.data?.customerLabel.split(",")
            : null;
          this.title = "修改";
        });
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.form.status = this.status;
      this.form.customerId = this.customerId;
      let obj = { ...this.form };
      obj.region = Array.isArray(this.form.region)
        ? this.form.region.join(",")
        : this.form.region || "";
      obj.helpPerson = Array.isArray(this.form.helpPerson)
        ? this.form.helpPerson.join(",")
        : this.form.helpPerson || "";
      obj.customerLabel = Array.isArray(this.form.customerLabel)
        ? this.form.customerLabel.join(",")
        : this.form.customerLabel || "";

      console.log(obj, this.form);

      if (this.customerId !== "-1") {
        updateCustomer(obj).then((response) => {
          this.$toast.success("修改成功");
          this.$router.replace("/crm/customer");
        });
      } else {
        addCustomer(obj).then((response) => {
          this.$toast.success("新增成功");
          this.$router.replace("/crm/customer");
        });
      }
    },
  },
};
</script>

<style scoped>
.submitButton {
  width: 95%;
  height: 50px;
  position: fixed;
  top: 90%;
  left: 10px;
}
</style>